<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="format-detection" content="telephone=no" />
  <meta name="format-detection" content="email=no" />
  <title>我的</title>
  <link rel="stylesheet" href="../../css/api.css">
  <link rel="stylesheet" href="../../css/vant.css">
  <link rel="stylesheet" href="../../css/main.css">
  <style>
    .priv-mask {
      background: rgba(0, 0, 0, 0.6);
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: 999;
    }

    .priv {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #fff;
      width: 70vw;
      height: 40vh;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      z-index: 999;
      padding: 0 .24rem;
      border-radius: .2rem;
      box-sizing: border-box;
    }

    .priv .title {
      font-size: .16rem;
    }

    .priv .sub-title {
      font-size: .12rem;
    }

    .priv .priv-url {
      color: #3F8CEC;
      font-weight: 600;
    }

    .priv .btn{
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .priv .suc-btn {
      background: #3F8CEC;
      border-radius: .3rem;
      width: 1rem;
      height: .4rem;
      font-size: .16rem;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .priv .ref-btn {
      color: #000;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: .3rem;
      font-size: .16rem;
      width: 1rem;
      height: .4rem;
      border: 1px solid #000;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak>
    <div class="priv-mask"></div>
    <div class="priv">
      <div class="title">欢迎使用铁蟹网</div>
      <div class="sub-title">感谢您信任并使用铁蟹网!我们将通过<span @click="goPrivacy" class="priv-url">《隐私政策》</span>和<span
          @click="goPersionPrivacy"
          class="priv-url">《用户协议》</span>帮助您了解我们收集、使用、存储和共享个人信息的情况,特别是我们所采集的个人信息类型与用途的对应关系。此外,您还能了解到您所享有的相关权利及实现途径。如您同意,请点击下方按钮开始接受我们的服务。
      </div>
      <div class="btn">
        <div class="ref-btn" @click="refuse">拒绝</div>
        <div class="suc-btn" @click="agress">同意</div>
      </div>
      
    </div>
  </div>
  <script src="../../script/api.js "></script>
  <script src="../../script/flexible.js "></script>
  <script src="../../script/fastclick.js "></script>
  <script src="../../script/vue.min.js "></script>
  <script src="../../script/iconfont.js "></script>
  <script src="../../script/vant.min.js "></script>
  <script src="../../script/common.js "></script>
  <script src="../../script/restful.js "></script>
  <script src="../../script/businessCommon.js "></script>

  <script>
    apiready = function () {
      var vm = new Vue({
        el: '#app',
        data: {},
        created: function () {},
        mounted: function () {},
        methods: {
          refuse() {
            api.closeWidget();
          },
          agress() {
            $api.setStorage('agreePrivacy', 1);
            api.sendEvent({
              name: 'sendAgreePrivacy',
              extra: {key:' value'}
            });
            api.closeWin();
          },
          goPrivacy: function () {
            api.openWin({
              name: 'common',
              url: '../mine/common_win.html',
              bounces: false,
              pageParam: {
                title: '隐私协议',
                contentType: '2'
              }
            });
          },
          goPersionPrivacy: function (e) {
            api.openWin({
              name: 'common',
              url: '../mine/common_win.html',
              bounces: false,
              pageParam: {
                title: '个人协议',
                contentType: '5'
              }
            });
          },
        }
      })
    }
  </script>
</body>

</html>